<script setup lang="ts">
import { useNaiveForm } from '@/hooks/common/form';

defineOptions({
  name: 'StudentSearch'
});
const { formRef, restoreValidation } = useNaiveForm();
const model = defineModel<Api.Train.Student>('model', {
  required: true
});

interface Emits {
  (e: 'clickReset'): void;
  (e: 'clickSearch'): void;
}

const emit = defineEmits<Emits>();


const clickSearch = () => {
  emit('clickSearch');
}
const clickReset = () => {
  restoreValidation();
  emit('clickReset');
}
</script>

<template>
  <n-card>
    <n-form ref="formRef" :model="model" label-placement="left" :label-width="80">
      <n-grid responsive="screen" item-responsive>
        <n-form-item-gi span="24 s:12 m:6" label="学生姓名" path="name" class="pr-24px">
          <n-input v-model:value="model.name" placeholder="请输入学生姓名" @keyup.enter="clickSearch"></n-input>
        </n-form-item-gi>
        <n-form-item-gi span="24 s:12 m:6" label="班级名称" path="className" class="pr-24px">
          <n-input v-model:value="model.className" placeholder="请输入班级名称" @keyup.enter="clickSearch"></n-input>
        </n-form-item-gi>
        <n-form-item-gi span="24 s:12 m:6" label="手机号" path="telephone" class="pr-24px">
          <n-input v-model:value="model.telephone" placeholder="请输入手机号" @keyup.enter="clickSearch"></n-input>
        </n-form-item-gi>
        <n-form-item-gi span="24 m:12 m:6" class="pr-24px">
          <n-space>
            <n-button type="primary" @click="clickSearch">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              查询
            </n-button>
            <n-button @click="clickReset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              重置
            </n-button>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-card>
</template>

<style scoped>

</style>
